let btn = document.querySelector(".record-btn");

//点击按钮进行录制
btn.addEventListener("click", async function () {
  //navigator.mediaDevices.getDisplayMedia 是浏览器提供的 API，用于获取屏幕的媒体流（比如屏幕共享的视频流等）。传入的参数 { video: true } 表示只获取视频相关的媒体流，不获取音频流（如果需要音频可以相应配置参数）。
  // await 关键字在这里用于等待 getDisplayMedia 这个异步操作完成，获取到的屏幕视频媒体流会赋值给变量 stream，后续将基于这个媒体流进行录制操作。
  let stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
  //在确定要使用的媒体（视频）的 MIME 类型
  const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
    ? "video/webm; codecs=vp9"
    : "video/webm";

  //使用前面获取到的屏幕视频媒体流 stream 和确定好的 MIME 类型 mime 来初始化一个 MediaRecorder 对象
  //这个 MediaRecorder 对象就是实际用来进行媒体录制操作的工具，它会按照指定的媒体流和格式将视频数据记录下来
  let mediaRecorder = new MediaRecorder(stream, { mimeType: mime });

  // 启动媒体录制过程
  mediaRecorder.start();
  //MediaRecorder 就开始从传入的媒体流 stream 中获取视频数据并进行记录了。


  //用于在录制过程中存储媒体数据块。
  //每当有一部分录制好的数据可用时，就会把这些数据添加到这个数组里，
  //最后利用这些数据块拼接成完整的可播放或下载的视频文件数据。
  let chunks = [];
  //当我们的屏幕被mediaRecorder记录下来时，我们需要将这些数据存储在一个数组类型的变量中
  //在媒体录制过程中，当有新的数据块（比如达到一定缓冲区大小等情况）可以被获取到时，就会触发这个事件
  mediaRecorder.addEventListener("dataavailable", function (e) {
    //将新的数据块（通过 e.data 获取）添加到之前创建的 chunks 数组中，不断积累录制过程中产生的数据
    chunks.push(e.data);
    console.log("chunks:" + chunks);
    console.log("chunks[0" + chunks[0]);
    console.log("chunks[0].tpye" + chunks[0].type);
  });

  //当调用 mediaRecorder.stop() 方法停止录制时（比如用户通过界面上其他交互操作触发了停止录制），就会触发这个事件
  mediaRecorder.addEventListener("stop", function () {
    //使用存储在 chunks 数组中的所有数据块创建一个 Blob 对象
    let blob = new Blob(chunks, {
      type: chunks[0].type
    });
    //调用 URL.createObjectURL 方法基于创建好的 Blob 对象生成一个临时的 URL，这个 URL 可以在浏览器环境中用来引用对应的二进制数据
    let url = URL.createObjectURL(blob)

    let video = document.querySelector("video");
    video.src = url

    let a = document.createElement("a")
    a.href = url;
    a.download = "video.webm" // 指定生成的文件名
    //模拟点击的超链接
    a.click();

  })
})


